<template>
    <ul class="list">
      <li class="item" v-for="(item) of letters"
      @touchstart.prevent="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @click="handleLetterClick"
      :ref="item"
      :key="item">
        {{item}}
      </li>
    </ul>
</template>

<script>
    export default {
        name: "Alphabet",
        props:{
          cities:Object
        },
        computed :{
          letters () {
            const letters =[]
            for(let i in this.cities){
              letters.push(i)
            }
            return letters
          }
        },
        data (){
          return {
            touchStatus:false,
            startY: 0,
            timer : null
          }
        },
        updated(){
          this.startY = this.$refs['A'][0].offsetTop;
        },
        methods :{
          handleLetterClick(e){
            this.$emit('change',e.target.innerText)
          },
          handleTouchStart(){
            this.touchStatus = true
          },
          handleTouchMove(e){
            if (this.touchStatus){
              if(this.timer){
                clearTimeout(this.timer)
              }
              this.timer = setTimeout(()=>{
                const touchY = e.touches[0].clientY -79;
                const index = Math.floor((touchY -this.startY)/20);
                if(index >= 0 && index < this.letters.length){
                  this.$emit('change',this.letters[index])
                }
              },16)
            }

          },
          handleTouchEnd(){
            this.touchStatus = false
          }
        }
    }
</script>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .list
    display: flex
    flex-direction column
    justify-content: center
    position: absolute
    top: 1.58rem
    bottom 0
    right 0
    width .4rem
    .item
      line-height:.4rem
      text-align center
      color $bgColor
      font-size .24rem
</style>
